<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 主页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .user-info-bar {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .welcome-text {
            flex: 1;
        }
        
        .welcome-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .welcome-message {
            font-size: 14px;
            color: #6B7280;
        }
        
        .notification-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 16px;
            height: 16px;
            background-color: #EF4444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: white;
        }
        
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }
        
        .quick-action {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .quick-action-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background-color: #DCFCE7;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: #22C55E;
            font-size: 20px;
        }
        
        .quick-action-name {
            font-size: 12px;
            color: #374151;
            text-align: center;
        }
        
        .target-circle {
            width: 64px;
            height: 64px;
            position: relative;
        }
        
        .target-progress {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(#22C55E 0% 70%, #E5E7EB 70% 100%);
            transform: rotate(-90deg);
        }
        
        .target-inner {
            position: absolute;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: white;
            top: 8px;
            left: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }
        
        .today-summary {
            display: flex;
            padding: 16px 0;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 20px;
        }
        
        .summary-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-right: 1px solid #f0f0f0;
        }
        
        .summary-item:last-child {
            border-right: none;
        }
        
        .summary-value {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .summary-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .food-recommendation {
            display: flex;
            overflow-x: scroll;
            padding-bottom: 8px;
            margin-bottom: 20px;
            scrollbar-width: none; /* Firefox */
        }
        
        .food-recommendation::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }
        
        .food-card {
            flex: 0 0 140px;
            margin-right: 12px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            background-color: white;
        }
        
        .food-image {
            width: 140px;
            height: a20px;
            object-fit: cover;
        }
        
        .food-info {
            padding: 8px;
        }
        
        .food-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .food-calories {
            font-size: 12px;
            color: #6B7280;
        }
        
        .achievement-card {
            position: relative;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .achievement-bg {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 80px;
            color: rgba(34, 197, 94, 0.1);
            transform: translate(10px, -20px);
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-title">减肥大师</div>
            <div style="position: relative;">
                <button class="nav-btn"><i class="fas fa-bell"></i></button>
                <div class="notification-badge">3</div>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 用户信息 -->
            <div class="user-info-bar">
                <div class="welcome-text">
                    <div class="welcome-name">你好，小明</div>
                    <div class="welcome-message">坚持了5天健康饮食，继续加油！</div>
                </div>
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="avatar">
            </div>
            
            <!-- 快速操作 -->
            <div class="quick-actions">
                <div class="quick-action">
                    <div class="quick-action-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <div class="quick-action-name">拍照识别</div>
                </div>
                
                <div class="quick-action">
                    <div class="quick-action-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="quick-action-name">记录餐食</div>
                </div>
                
                <div class="quick-action">
                    <div class="quick-action-icon">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="quick-action-name">记录运动</div>
                </div>
                
                <div class="quick-action">
                    <div class="quick-action-icon">
                        <i class="fas fa-weight"></i>
                    </div>
                    <div class="quick-action-name">记录体重</div>
                </div>
            </div>
            
            <!-- 今日目标与摘要 -->
            <div class="card">
                <div class="card-title">今日目标</div>
                
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <div class="text-lg font-semibold mb-1">1,462 / 2,100</div>
                        <div class="text-sm text-gray-500">已摄入卡路里 / 目标</div>
                    </div>
                    
                    <div class="target-circle">
                        <div class="target-progress"></div>
                        <div class="target-inner">70%</div>
                    </div>
                </div>
                
                <div class="today-summary">
                    <div class="summary-item">
                        <div class="summary-value">1,462</div>
                        <div class="summary-label">卡路里</div>
                    </div>
                    
                    <div class="summary-item">
                        <div class="summary-value">235</div>
                        <div class="summary-label">消耗</div>
                    </div>
                    
                    <div class="summary-item">
                        <div class="summary-value">42g</div>
                        <div class="summary-label">蛋白质</div>
                    </div>
                    
                    <div class="summary-item">
                        <div class="summary-value">3.5L</div>
                        <div class="summary-label">饮水</div>
                    </div>
                </div>
            </div>
            
            <!-- 食物推荐 -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-2">
                    <h2 class="text-lg font-semibold">推荐健康餐</h2>
                    <a href="#" class="text-green-500 text-sm">查看全部</a>
                </div>
                
                <div class="food-recommendation">
                    <div class="food-card">
                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="food-image" alt="健康沙拉">
                        <div class="food-info">
                            <div class="food-name">鸡胸肉沙拉</div>
                            <div class="food-calories">320 卡路里</div>
                        </div>
                    </div>
                    
                    <div class="food-card">
                        <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="food-image" alt="蔬菜沙拉">
                        <div class="food-info">
                            <div class="food-name">地中海沙拉</div>
                            <div class="food-calories">280 卡路里</div>
                        </div>
                    </div>
                    
                    <div class="food-card">
                        <img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="food-image" alt="牛油果吐司">
                        <div class="food-info">
                            <div class="food-name">牛油果吐司</div>
                            <div class="food-calories">220 卡路里</div>
                        </div>
                    </div>
                    
                    <div class="food-card">
                        <img src="https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="food-image" alt="燕麦粥">
                        <div class="food-info">
                            <div class="food-name">蓝莓燕麦粥</div>
                            <div class="food-calories">240 卡路里</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 成就卡片 -->
            <div class="card achievement-card">
                <div class="achievement-bg">
                    <i class="fas fa-medal"></i>
                </div>
                <div class="card-title">本周成就</div>
                <div class="text-lg font-semibold mb-2">连续记录 5 天</div>
                <div class="text-sm text-gray-600 mb-3">你已经连续记录健康数据 5 天，获得 500 积分</div>
                <button class="btn-outline">领取奖励</button>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item active">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='food-recognition.html'">
                <i class="tab-icon fas fa-camera"></i>
                <span>识别</span>
            </div>
            <div class="tab-item" onclick="location.href='diet-plan.html'">
                <i class="tab-icon fas fa-utensils"></i>
                <span>饮食</span>
            </div>
            <div class="tab-item" onclick="location.href='exercise-plan.html'">
                <i class="tab-icon fas fa-dumbbell"></i>
                <span>运动</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
        });
    </script>
</body>
</html> 